<template>
  <el-table :summary-method="getSummaries" show-summary :data="tableData" :span-method="objectSpanMethod" border class="statistics-list">
    <el-table-column prop="countyName" align="center" label="区/县">
      <template slot-scope="{row}">
        <span class="to-link" @click="goEquipment(row)">{{ row.countyName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="enterpName" align="center" label="企业">
      <template slot-scope="{row}">
        <span class="to-link" @click="goEquipmentEnter(row)">{{ row.enterpName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="equipmentEnterpCount" align="center" label="合计(台)" />
    <el-table-column prop="typeName" align="center" label="钻机类型">
      <template slot-scope="{row}">
        <span class="to-link" @click="goEquipmentType(row)">{{ row.typeName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="equipmentTypeCount" align="center" label="台数" />
  </el-table>
</template>

<script>
import { regionStatisticsExport } from '@/api/statisticalAnalysis/statistics/equiment'
import { dataMethod } from '@/utils/tableObjectSpanMethod.js'
export default {
  name: 'Home',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      regionList: [], // 地区列表
      spanObj: {}
    }
  },
  watch: {
    tableData: {
      immediate: true,
      handler(value) {
        if (value && value.length) {
          this.spanObj = dataMethod(this.tableData, ['countyName', 'enterpName', 'equipmentEnterpCount'])
          const regionList = this.tableData.map(item => ({ countyName: item.countyName, county: item.county }))
          this.regionList = this.deteleObject(regionList)
        }
      }
    }
  },
  methods: {
    // 数组里的对象数据去重
    deteleObject(arr) {
      const temp = {}	//	用于name判断
      const result = [] // 最后的新数组
      arr.map((item, index) => {
        if (!temp[item.county]) {
          result.push(item)
          temp[item.county] = true
        }
      })
      return result
    },
    // 导出表格
    async exportData() {
      const tableHeader = [
        {
          'key': 'countyName',
          'label': '区/县'
        },
        {
          'key': 'enterpName',
          'label': '企业'
        },
        {
          'key': 'equipmentEnterpCount',
          'label': '合计(台)'
        },
        {
          'key': 'typeName',
          'label': '钻机类型'
        },
        {
          'key': 'equipmentTypeCount',
          'label': '台数'
        }
      ]
      const res = await regionStatisticsExport(tableHeader)
      if (!res) return
      this.downloadFileFlow(res, '设备地区类型统计信息')
    },
    // 表格合计
    getSummaries(param) {
      const { data } = param
      const equipmentTypeCount = data.reduce((prev, item) => item.equipmentTypeCount + prev, 0)
      const sums = []
      sums.push('总计', '', equipmentTypeCount, '', equipmentTypeCount)
      return sums
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 列合并
      const _row = this.spanObj[column.property] ? this.spanObj[column.property][rowIndex] : 1
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    },
    // 设备列表筛选区域
    goEquipment({ county }) {
      this.$router.push({
        name: 'statisticsList-equipment',
        params: { cityOptions: this.regionList, county, type: '2', currentTable: '1' }
      })
    },
    // 设备列表筛选区域/设备类型/企业名称
    goEquipmentType({ countyName, enterpName, equipmentTypeId, county, typeNum }) {
      this.$router.push({
        name: 'statisticsList-equipment',
        params: { cityOptions: this.regionList, equipmentTypeId, enterpName, typeNum, county, type: '2', currentTable: '1' }
      })
    },
    // 设备列表筛选区域/设备类型/企业名称
    goEquipmentEnter({ enterpName, county }) {
      this.$router.push({
        name: 'statisticsList-equipment',
        params: { cityOptions: this.regionList, enterpName, county, type: '2', currentTable: '1' }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
